<template>
    <div>
        <nav>
            <span style="font-size:5vw;" @click="searchGo" class="fa fa-angle-left"></span>
            <div class="hot">
                <span class="nav-one fa fa-search"></span><input type="search" name="" id="" placeholder="话题探索|创意句子|心里话">
            </div>
            <span>搜索</span>
        </nav>
        <main>
            <div style="text-align:left">
                <span>热门搜索</span>
            </div>
            <div class="content">
                <div class="someone" v-for="(item,index) in dataList" :key="index">
                <span v-text="item"></span>
                </div>
            </div>
            
        </main>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dataList:[
                "情商瞬间","优美句子","创意句子","诗词改编",
                "生活感悟","创新思维","正能量","幽默诙谐",
                "话题探索","精辟句子","个性签名","表达想法",
                "哲理句子","情感表达","英文句子","古风句子",
                "图文句子","意境句子","心里话","伤感句子",
                "温馨句子","过往回忆","生活分享"
            ]
        }
    },
    methods: {
        searchGo:function() {
            this.$emit('searchgo')
        }
    },
}
</script>

<style scoped>
nav {
  width: 100vw;
  height: 15vw;
  background: #09bb07;
  color: white;
  font-size: 4.5vw;
  line-height: 15vw;
  padding: 0 3vw;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hot{
    position: relative;
}
input{
    width: 66vw;
    height: 8vw;
    border: 1px solid white;
    text-indent: 8vw;
}
.nav-one{
    display: inline-block;
    border: 1px solid white;
    font-size: 6vw;
    height: 6.3vw;
    color: gray;
    position: absolute;
    top: 4.3vw;
}
.content{
    width: 90vw;
    display: flex;
    flex-basis: 18vw;
    flex-wrap: wrap;
}
.someone{
   margin: 3vw 2vw;
    width: 18vw;
    border: 1px solid gray;
}
</style>
